<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="status" style="width: 220px" size="small">
            <el-select v-model="searchMap.status" placeholder="状态">
              <el-option v-for="item in porjectState" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="projectPointTypeId" style="width: 220px" size="small">
            <el-select v-model="searchMap.projectPointTypeId" filterable placeholder="选择项目点类型">
              <el-option v-for="item in projectPointTypeName" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="projectPointName" size="small">
            <el-input v-model="searchMap.projectPointName" placeholder="项目名称"></el-input>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 搜索模块over -->

      <!-- 表格模块 -->
      <div class="table_container">
        <el-table :data="projectPointList" stripe class="per_table" style="width: 100%" height="550"
          v-loading="projectPointLoading">
          <el-table-column prop="picUrl" align="center" label="项目图片">
            <template slot-scope="scope">
              <el-image style="width: 80px; height: 80px" :src="scope.row.picUrl"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="projectPointCode" align="center" label="项目编号">
            <template #default="scope">
              {{ filterProjectName(scope) }}
            </template>
          </el-table-column>
          <el-table-column prop="projectPointTypeName" align="center" label="项目类型">
          </el-table-column>
          <el-table-column prop="projectPointName" align="center" label="项目名称">
          </el-table-column>
          <el-table-column prop="projectAddress" align="center" label="项目地址">
          </el-table-column>
          <el-table-column prop="projectDirector" align="center" label="联系人"></el-table-column>
          <el-table-column prop="directorPhone" align="center" label="联系电话"></el-table-column>
          <el-table-column align="center" label="经纬度">
            <template slot-scope="scope">
              {{ scope.row.lng + "/" + scope.row.lat }}
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              <div class="status-content" v-if="scope.row.status == 0">
                <span class="status-normal-radius"></span>
                <span class="status-normal">有效</span>
              </div>
              <div class="status-content" v-else-if="scope.row.status == 1">
                <span class="status-void-radius"></span>
                <span class="status-void">无效</span>
              </div>
              <div class="status-content" v-else-if="scope.row.status == 2">
                <span class="status-demo-radius"></span>
                <span class="status-demo">演示</span>
              </div>
              <div class="status-content" v-else-if="scope.row.status == 3">
                <span class="status-unusual-radius"></span>
                <span class="status-unusual">勿扰</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="button-group">
                <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
                <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row, 'delect')">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格模块over -->

      <!-- 分页 -->
      <pagination :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getList" />
      <!-- 分页over -->
      <!-- 弹窗 -->
      <el-dialog class="large_dialog" :title="dialogName" :visible.sync="dialogVisible" top="10px" :key="dialogKey">
        <div>
          <div class="project-head">
            <ul class="head-nav-list">
              <li class="nva-list-item" v-for="item of navList" :key="item.message">
                <el-button :class="{ 'btn_group': defBgc, 'btn_group_active': item.path === currentComponent }"
                  @click="setCurrentComponent(item.path)">
                  {{ item.title }}
                </el-button>
              </li>
            </ul>
          </div>
        </div>
        <transition name="tab" mode="out-in">
          <keep-alive>
            <component ref="comps" @cancel="cancel" :is="currentComponent" style="overflow: auto;" @success="success"
              :projectPointInfo="projectPointInfo"></component>
          </keep-alive>
        </transition>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel" class="btn_cancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" class="btn_primary">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import { getProjectPointControlList, delProjectPointControl, getProjectPointControl, getCommonConfig } from '@/api'
import BasicInformation from './basicInformation'
import PlaneImg from './planeImg/index.vue'
import RiskPoint from './riskPoint/index.vue'
import emergency from './emergency/index.vue'
import emergencyCard from './emergencyCard/index.vue'
import emergencyRanks from './emergencyRanks/index.vue'
export default {
  name: 'pointControl',
  components: {
    BasicInformation,
    PlaneImg,
    RiskPoint,
    emergency,
    emergencyCard,
    emergencyRanks,
  },
  data() {
    return {
      dialogName: '',
      dialogKey:0,
      defBgc: true,
      // 下标
      buttonIndex: 0,
      // 切换组件
      currentComponent: "BasicInformation",
      // 搜索条件                                                      
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        projectPointName: undefined,
        status: undefined,
        projectPointTypeId: undefined,
      },
      porjectState: [
        {
          label: '有效',
          value: 0,
        },
        {
          label: '无效',
          value: 1,
        },
        {
          label: '演示',
          value: 2,
        },
        {
          label: '勿扰',
          value: 3,
        },
      ],
      projectPointTypeName: [],
      // 项目点列表
      projectPointList: [],
      // 表格加载状态
      projectPointLoading: true,
      // 总条数
      total: 0,
      // 按钮是否可用
      // disabled: true,
      // 是否打开弹窗
      dialogVisible: false,
      // 提交表单数据
      formModel: {
        areaId: undefined,
        cityId: undefined,
        deptId: undefined,
        directorPhone: undefined,
        lat: undefined,
        lng: undefined,
        picUrl: undefined,
        projectAddress: undefined,
        projectDirector: undefined,
        projectPointName: undefined,
        projectPointTypeId: undefined,
        // arealngId:undefined,
        provinceId: undefined,
        remark: undefined,
        sort: undefined,
        status: undefined,
      },
      navList: [
        {
          title: "基本信息",
          path: "BasicInformation",
        },
        {
          title: "平面图",
          path: "PlaneImg",
        },
        {
          title: "风险点",
          path: "RiskPoint",
        },
        {
          title: "应急预案",
          path: "emergency",
        },
        {
          title: "应急卡",
          path: "emergencyCard",
        },
        {
          title: "应急队伍",
          path: "emergencyRanks",
        },
      ],
      // picUrl: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // 弹窗表单数据
      projectForm: {
        projectPointCode: undefined,
        projectImg: undefined,
        projectPointTypeName: [

        ],
        projettName: undefined,
        region: [

        ],
        projetctRegion: undefined,
        contact: undefined,
        directorPhone: undefined,
        affiliation: [

        ],
        sort: undefined,
        // 纬度
        latitude: undefined,
        // 经度
        Longitude: undefined,
        synopsis: undefined,
      },
      // 项目点信息
      projectPointInfo: {
        projectPointId: undefined,
        projectPointName: undefined,
      },
      // 弹框点击状态  0 为添加、1为编辑
      dialogState: 0
    }
  },
  created() {
    // 初始化表格
    this.getList()
    // 初始化项目类型下拉框
  },
  watch: {
    dialogVisible: {
      handler(val) {
        if (!val) {
          // 关闭后重置组件顺序 
          this.setCurrentComponent()

        }
      }
    }
  },
  computed: {
    pageTitle() {
      return '项目点管理'
    }
  },
  methods: {
    // 
    filterProjectName(data) {
      return data.row.projectPointId
    },
    async getList() {
      getCommonConfig().then(res => {
        getProjectPointControlList(this.searchMap).then(response => {
          this.projectPointList = response.rows.map(item => {
            return {
              ...item,
              picUrl: res.data.inFilePrefix + item.picUrl,
            }
          })
          this.projectPointLoading = false
          this.total = response.total
        })
      })
    },
    // 动态切换组件
    setCurrentComponent(componentName = 'BasicInformation') {
      if (this.dialogState === 0 && this.dialogVisible) {
        this.$message.warning('请先保存数据')
        return
      }
      this.currentComponent = componentName;
      console.log(componentName)
    },
    //重置搜索栏数据
    handleReset() {
      this.$refs['searchMap'].resetFields()
      this.handleSearch()
    },
    // 新增用户信息
    handleAdd() {
      this.dialogState = 0
      this.dialogKey += 1
      this.dialogVisible = true
      this.dialogName = "新增项目点信息"
      this.$nextTick(async () => {
        if (this.dialogVisible) {
          await this.$refs.comps.show()
        }
      })
    },
    // 修改项目点管理
    async handleEdit(row) {
      console.log(row, '修改项目点row')
      this.dialogKey += 1
      this.dialogState = 1
      this.dialogVisible = true
      this.dialogName = "编辑项目点信息"
      const response = await getProjectPointControl(row.projectPointId)
      this.projectPointInfo = row
      const region = {
        provinceId: response.data.provinceId,
        cityId: response.data.cityId,
        areaId: response.data.areaId
      }
      console.log(region)
      this.$nextTick(async () => {
        if (this.dialogVisible) {
          await this.$refs.comps.show(response.data, region)
        }
      })
    },
    // 删除项目点列表信息
    handleDelete(row) {
      const pointId = row.projectPointId
      this.$confirm("确认删除这行数据吗？", "提示", {
        configButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delProjectPointControl([pointId]).then((res) => {
          if (200 === res.code) {
            this.$message.success("删除成功")
            this.getList()
          }
        });
      })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSubmit() {
      if (this.currentComponent !== 'BasicInformation') {
        this.dialogVisible = false
        return false
      }
        this.$refs.comps.handleSubmit()
    },
    // 点击取消
    handleCancel() {
      this.dialogVisible = false
    },
    // 表格搜索
    handleSearch() {
      this.searchMap.pageNum = 1
      this.getList()
    },
    // 重置表单数据
    resetForm() {
      this.formModel = {
        dicFormtName: undefined,
        dicFormtType: undefined,
        status: "",
        roleIds: ""
      }
    },
    // 弹窗新增编辑-取消
    cancel() {
      this.dialogVisible = false;
    },
    // 保存成功
    success(info) {
      if (info !== 'update') {
        this.projectPointInfo = info
        this.dialogState = 1
      }
      this.getList()
      this.dialogVisible = false
    }
  }
}
</script>
  
<style lang="less" scoped>
.imgBox {
  width: 100%;
  height: 100%;
}

.el-form-item__content {
  .el-select {
    width: 100%;
  }
}

.project-head {
  padding-bottom: 29px;
}

.nva-list-item {
  color: #fff;
  float: left;
}

.head-nav-list::after {
  display: block;
  clear: both;
  content: " ";
}

.el-dialog__body {
  padding: 0 28px !important;
}

.flex .el-form-item__content {
  height: auto !important;
}

.large_dialog .el-dialog__body {
  height: 780px !important;
}

.el-upload--picture-card {
  width: 368px;
  height: 235px;
  background-color: transparent;
}

/deep/ .el-dialog__body {
  overflow: hidden;
}</style> 
